<!-- This is the corresponding "starter code" for 04_Hello Map in Udacity and Google's Maps
API Course, Lesson 1 -->
<html>

	<head>
		<!-- styles put here, but you can include a CSS file and reference it instead! -->
		<style type="text/css">
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			#map {
				height: 100%;
			}
			
			#toggle-drawing {
				width: 27%;
				position: relative;
				margin-left: 10px;
			}
		</style>
	</head>

	<body>
		<div>
			<span class="text"> Draw a shape to search within it for homes!</span>
			<input id="toggle-drawing" type="button" value="Drawing Tools">
		</div>
		<div id='map'></div>
		<script>
			var map;

			// This global polygon variable is to ensure only ONE polygon is rendered.
			var polygon = null;

			var initFirstMarker = function() {
				var loc = {
					lat: 40.7413549,
					lng: -73.99802439999996
				};

				var marker = new google.maps.Marker({
					position: loc,
					map: map,
					title: 'Hello World!'
				});
			}

			function initMap() {
				map = new google.maps.Map(document.getElementById('map'), {
					center: {
						lat: 40.7413549,
						lng: -73.99802439999996
					},
					zoom: 13
				});

				initFirstMarker();

				// Initialize the drawing manager.
				var drawingManager = new google.maps.drawing.DrawingManager({
					drawingMode: google.maps.drawing.OverlayType.POLYGON,
					drawingControl: true,
					drawingControlOptions: {
						position: google.maps.ControlPosition.TOP_LEFT,
						drawingModes: [
							google.maps.drawing.OverlayType.POLYGON
						]
					}
				});

				drawingManager.addListener('overlaycomplete', function(event) {
					// First, check if there is an existing polygon.
					// If there is, get rid of it and remove the markers
					if(polygon) {
						polygon.setMap(null);
						hideListings(markers);
					}
					// Switching the drawing mode to the HAND (i.e., no longer drawing).
					drawingManager.setDrawingMode(null);
					// Creating a new editable polygon from the overlay.
					polygon = event.overlay;
					polygon.setEditable(true);
					// Searching within the polygon.
					searchWithinPolygon();
					// Make sure the search is re-done if the poly is changed.
					polygon.getPath().addListener('set_at', searchWithinPolygon);
					polygon.getPath().addListener('insert_at', searchWithinPolygon);
				});

				document.getElementById('toggle-drawing').addEventListener('click', function() {
					toggleDrawing(drawingManager);
				});
			}

			// This shows and hides (respectively) the drawing options.
			function toggleDrawing(drawingManager) {
				if(drawingManager.map) {
					drawingManager.setMap(null);
					// In case the user drew anything, get rid of the polygon
					if(polygon !== null) {
						polygon.setMap(null);
					}
				} else {
					drawingManager.setMap(map);
				}
			}

			function searchWithinPolygon() {
				var result = google.maps.geometry.spherical.computeArea(polygon.getPath());

				alert('calculated area:' + result);
			}
		</script>

		<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCpYTA21hbH45pyuZ0Cm1qtsT2Qt4mJPSg&callback=initMap" async defer></script>
		<script>
		</script>
	</body>

</html>